<template>
  <div>
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="closeDialog" :destroy-on-close="true" :append-to-body="true" :close-on-click-modal="false">
    <el-form :model="quartzForm" :rules="quartzRules" ref="quartzForm">
      <el-form-item label="任务key" :label-width="formLabelWidth" prop="jobKey">
        <el-input v-model="quartzForm.jobKey" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="任务分组" :label-width="formLabelWidth" prop="jobGroup">
        <el-input v-model="quartzForm.jobGroup" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="Cron表达式" :label-width="formLabelWidth" prop="cronExpress">
        <el-input v-model="quartzForm.cronExpress" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="job类全路径" :label-width="formLabelWidth" prop="jobClass">
        <el-input v-model="quartzForm.jobClass" autocomplete="off" aria-placeholder="例如：com.monkeylessey.job.MyTestJob"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
        <el-input v-model="quartzForm.remark" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth" prop="jobStatus">
        <el-radio-group v-model="quartzForm.jobStatus">
          <el-radio label="0">启用</el-radio>
          <el-radio label="1">暂停</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="addOrEditQuartz">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import {Message} from "element-ui";
import {addQuartz, editQuartz, getQuartzs} from "@/api/quartz";

export default {
  name: "QuartzDialog",
  data() {
    return {
      formLabelWidth: '120px',
      quartzRules: {
        jobKey: [
          { required: true, message: '请输入任务key', trigger: 'blur' }
        ],
        jobGroup: [
          { required: true, message: '请输入任务分组', trigger: 'blur' }
        ],
        cronExpress: [
          { required: true, message: '请输入Cron表达式', trigger: 'blur' }
        ],
        jobStatus: [
          { required: true, message: '请选择任务状态', trigger: 'change' }
        ],
        jobClass: [
          { required: true, message: '请输入任务类全路径', trigger: 'blur' }
        ],
      }
    }
  },
  computed: {
    dialogFormVisible: {
      get() {
        return this.$store.state.quartz.dialogFormVisible;
      },
      set(value) {
        this.$store.state.quartz.dialogFormVisible = value;
      }
    },
    dialogTitle: {
      get() {
        return this.$store.state.quartz.dialogTitle;
      },
      set(value) {
        this.$store.state.quartz.dialogTitle = value;
      }

    },
    quartzForm: {
      get() {
        return this.$store.state.quartz.quartzForm;
      },
      set(value) {
        this.$store.state.quartz.quartzForm = value;
      }
    }
  },
  methods: {
    refreshData() {
      let params = {
        "current": this.$store.state.quartz.currentPage,
        "size": this.$store.state.quartz.pageSize
      };
      // 刷新
      getQuartzs(params).then((res) => {
        this.$store.state.quartz.tableData = res.data.data;
        this.$store.state.quartz.total = res.data.total;
        this.clearForm();
      })
    },
    clearForm() {
      Object.keys(this.quartzForm).forEach((key) => {
        this.quartzForm[key] = null;
      })
    },
    closeDialog() {
      this.$store.state.quartz.dialogFormVisible = false;
      this.clearForm();
    },
    addOrEditQuartz() {
      this.$refs["quartzForm"].validate((valid) => {
        if (valid) {
          if (this.dialogTitle === "添加定时任务") {
            addQuartz(this.quartzForm).then((res) => {
              Message.success(res.data.msg);
              this.dialogFormVisible = false;
              this.refreshData();
            })
          } else {
            editQuartz(this.quartzForm).then((res) => {
              Message.success(res.data.msg);
              this.dialogFormVisible = false;
              this.refreshData();
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
